<template>
  <!-- 文章详情页左侧文章 -->
  <div class="blog-detail-container">
    <h1>{{ blog.title }}</h1>
    <div class="aside">
      <span>日期: {{ formatDate(blog.createDate) }}</span>
      <span>浏览: {{ blog.scanNumber }}</span>
      <a href="#comment-area">评论: {{ blog.commentNumber }}</a>
      <span v-if="!blog.category">未分类</span>
      <RouterLink
        v-if="blog.category"
        :to="{
          name: 'CategoryBlog',
          params: { categoryId: blog.category.id },
        }"
        >{{ blog.category.name }}</RouterLink
      >
    </div>
    <div v-html="blog.htmlContent" class="markdown-body">
      <!-- 书写v-html后标签内写的内容就会失效了 -->
      <!-- vue为了安全会将以下内容[文章的包含html结构的内容]进行编码, 结果为纯文本, 不符合我们的需求, 所以不用此方法 -->
      <!-- {{ blog.htmlContent }} -->
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils";
import "highlight.js/styles/github.css";
import "@/styles/markdown.css";
export default {
  props: {
    blog: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    this.setHeadingId();
  },
  methods: {
    formatDate,
    // 设置每级标题的id值 [若无id则右侧导航将失效]
    setHeadingId() {
      const articleEle = document.querySelector(".markdown-body");
      const headingArr = articleEle.querySelectorAll("h1,h2,h3,h4,h5,h6"); // 获取所有标题元素
      // console.log(headingArr);
      // 设置id
      for (let i = 0; i < headingArr.length; i++) {
        const item = headingArr[i];
        // break;
        if (item.id) {
          continue; // 若原本已有id则不设置
        }
        // id值中间不能有' '或'. ', 有的话用'-'连接, 同时删除各类括号
        const id = item.innerText
          .split(/ |(?:\. )|[，]/)
          .join("-")
          .split(/[（）《》\(\)\[\]\{\}]/)
          .join("")
          .toLowerCase();
        // console.log("id:", id);
        item.id = id; // 设置id [有些文章的数据中没有toc数据, 所以需要自己设置]
      }

      // 为没有toc的文章创建toc
      if (!this.blog.toc.length) {
        // if (1) {
        let toc = [];
        let i = 0;
        function createToc(toc = []) {
          if (i + 1 > headingArr.length) {
            return toc; // 如果是最后一位
          }
          const item = headingArr[i];
          const level = +item.nodeName[item.nodeName.length - 1];
          const nextLevel =
            i === headingArr.length - 1
              ? -1
              : +headingArr[i + 1].nodeName[item.nodeName.length - 1];
          const isChildren = i !== headingArr.length - 1 && level < nextLevel; // 是否有子目录
          // console.log(
          //   `i: ${i}\nlevel: ${level}\nnextLevel: ${nextLevel}\nisChildren: ${isChildren}\ntoc: ${toc}`
          // );
          i++;
          toc.push({
            name: item.innerText,
            anchor: item.innerText
              .split(/ |(?:\. )|[，]/)
              .join("-")
          .split(/[（）《》\(\)\[\]\{\}]/)
              .join("")
              .toLowerCase(),
            level: level,
            children: isChildren ? createToc([]) : "",
          });
          if (level > nextLevel) {
            return toc; // 如果没有子目录了
          }
          return createToc(toc);
        }
        toc = createToc(toc);
        // console.log("toc:", toc);
        this.$bus.$emit("blogDetailToc", toc);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";
.aside {
  font-size: 12px;
  color: @gray;
  span,
  a {
    margin-right: 15px;
  }
}
.markdown-body {
  margin: 2em 0;
}
</style>
